<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令</title>
</head>
<body>

<!--
1.注册全局指令
Vue.directive('my-directive',function(el,binding){
       el.innerHTML = binding.value.toupperCase()
    })
2.注册局部指令
directive:{
    'my-directive' :{
        bind(el,binding){
            el.innerHTML =binding.value.toupperCase()
        }
      }
}
3.使用指令
    v-my-directive='xxx'
-->
<!--
需求：自定义2个指令
1.功能类似于v-text,但是转换为大小写
2.功能类似于v-text,但是转换为全小写
-->
<div id="example1">
    <p v-upper-text="msg1"></p>
    <p v-lower-text="msg1"></p>
</div>

<div id="example2">
    <p v-upper-text="msg2"></p>
    <p v-lower-text="msg2"></p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    //定义全局指令
    //el:指令属性所在的标签对象
    //binding:包含指令相关信息数据的对象
    Vue.directive('upper-text',function(el,binding){
        //console.log(el);
        //console.log(binding);
        el.innerHTML = binding.value.toUpperCase()
    })
    const vm =new Vue({
        el:'#example1',
        data:{
            msg1:'NBA AAasdadaNNA'
        },
        directives:{//局部指令 只在当前范围有效
            'lower-text'(el,binding){
                el.textContent = binding.value.toLowerCase()
            }
        }
    })

    new Vue({
        el:'#example2',
        data:{
            msg2:'JUST Do It!'
        },
        deriectives:{
            'lower-text'(el,binding){
                el.textConent = binding.value.toLowerCase()
            }
        }
    })

</script>
</body>
</html>